﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>商品详情-购买</title>
    <link rel="stylesheet" href="Content/CSS/bootstrap.min.css">
    <script src="Content/JS/jquery.min.js"></script>
    <script src="Content/JS/bootstrap.min.js"></script>
    <!--<link rel="stylesheet" href="Content/CSS/cloud-detail-buy.css">-->
    <style>
        .contant_text {
            min-width: 990px;
        }

        .contanter_area {
            width: 900px;
            margin: auto;
        }
        /*搜索行样式*/
        .b1 {
            font-size: 38px;
            font-weight: bold;
            margin-bottom: 0px;
        }

        .b2 {
            font-size: 14px;
        }


        .seacrh-text {
            float: left;
            width: 480px;
        }

        .b3 {
            padding-top: 5px;
            color: #978f8f;
        }

            .b3 span {
                padding: 0px 5px;
            }

        .search-btn1, .search-btn2 {
            float: left;
            width: 85px;
        }

        .search-btn1 {
            margin-left: 10px;
            margin-right: 6px;
        }

        .list-search {
            background-color: #fff;
            border-right: none;
        }

            .list-search:hover {
                background-color: #fff;
            }

        .lg-input-add {
            border-left: none;
        }

        .btn-default-add1 {
            background-color: #ec462f;
            color: white;
            border-radius: 0px;
            padding: 6px 10px;
        }

        .btn-default-add2 {
            background-color: #fbe5e3;
            color: #3c3939;
            border-radius: 0px;
            padding: 6px 10px;
        }

        .btn-default-add3 {
            background-color: #7b4439;
            color: white;
            border-radius: 0px;
            width: 220px;
            height: 40px;
        }

            .btn-default-add3:hover {
                color: white !important;
            }

        .row-top .col-md-9, row-top .col-md-3 {
            padding-right: 0px;
        }

        .row-top .col-md-9 {
            padding-left: 0px;
            padding-top: 15px;
        }

        .lg-input-add {
            height: 34px;
        }

        .seacrh-text .btn-primary, .seacrh-text .input-lg {
            border-radius: 0px !important;
            font-size: 13px;
        }

        .list-search {
            padding: 0px 0px 0px 5px !important;
            border-radius: 0px !important;
        }

            .list-search img {
                height: 32px;
            }

        /*搜索行样式end*/
        .row-add1 {
            padding-top: 0px;
            border-radius: 0px;
        }

            .row-add1 > .col-md-3, .row-add1 > .col-md-9 {
                padding-left: 0px;
                padding-right: 0px;
                padding-top: 0px;
            }

        .btn:hover {
            text-decoration: none;
        }

        .breadcrumb-add {
            padding: 8px 15px;
            margin-bottom: 20px;
            list-style: none;
            background-color: transparent;
            border-radius: 0px;
        }

            .breadcrumb-add > li + li:before {
                content: " ";
            }

            .breadcrumb-add a {
                font-weight: bold;
            }

        .breadcrumb a {
            color: #000;
            text-decoration: none;
        }

        .breadcrumb-add2 > li + li:before {
            padding: 0 5px;
            color: #706b6b;
            content: ">\00a0";
        }

        .breadcrumb-add2 a {
            font-size: 12px;
            color: #706b6b;
        }

        ol {
            border-radius: 0px !important;
        }
        /*五角星效果*/
        .cleanfloat {
            padding-right: 20px;
            padding-left: 0px;
        }

            .cleanfloat::after {
                display: inline-block;
                clear: both;
                content: "";
                visibility: hidden;
                height: 0;
            }
        /*清浮动*/
        ul li {
            list-style: none;
            float: left;
            font-size: 14px;
            margin: 1px;
            color: #ccc;
            cursor: pointer;
        }
        /*五角星样式*/
        .hs, .cs {
            color: #f00;
        }
        /*五角星点击后样式*/

        .container-middle {
            margin-top: 10px;
            margin-left: -15px;
            margin-right: -15px;
        }

        .cont-product-left {
            border: 1px solid #ddd;
            background-color: #f6f6f6;
            float: left;
            width: 600px;
            margin-right: 10px;
            padding-bottom: 15px;
        }

        .cont-product-left2 {
            border: 1px solid #ddd;
            float: left;
            width: 600px;
            margin-right: 10px;
            padding-bottom: 15px;
        }

        .product-buy-desc {
            padding: 15px 15px 5px 15px;
        }

        .obj-img {
            width: 90px;
        }

        .med-head {
            font-weight: bold;
            padding-bottom: 10px;
        }

        .med-desc {
            font-size: 12px;
            color: #626060;
        }

        .row-price {
            background-color: #f3dfdf;
            margin: 15px 5px;
            padding: 15px;
        }

        .col-evaluation {
            padding-top: 30px;
        }

        .sp-coler {
            color: #f00;
        }

        .box-area {
            padding-left: 0px;
        }

        .col-txt {
            text-align: right;
            padding-right: 10px;
            padding-top: 2px;
            float: left;
            width: 150px;
            text-align: right;
        }

        .col-txtbox {
            padding-left: 0px;
            line-height: 40px;
            float: left;
        }

        .box-area li {
            float: left;
            padding: 0 5px;
            margin-right: 5px;
        }

            .box-area li a {
                text-decoration: none;
            }

        .sel-active {
            padding: 5px;
        }

            .sel-active a {
                color: #f00;
                border: 1px solid #f00;
                padding: 5px;
            }

        .sel a {
            color: #6d6a6a;
            border: 1px solid #6d6a6a;
            padding: 5px;
        }

            .sel a:hover {
                color: #f00;
                border: 1px solid #f00;
            }


        .self-select {
            clear: both;
            padding-top: 5px;
            padding-left: 5px;
        }

            .self-select a {
                text-decoration: none;
                color: #1009bd;
            }

        .buy-money {
            color: #f00;
            font-size: 26px;
            display: inline-block;
            padding-top: 10px;
        }

        .btn-buy {
            margin-right: 10px;
            width: 120px;
            border-radius: 0px;
            background-color: #ec5546;
            color: #fff;
            border: 1px solid #ec5546;
        }

            .btn-buy:hover, .btn-save:hover {
                background-color: #ec5546;
                color: #fff;
                border: 1px solid #ec5546;
            }

        .btn-save {
            margin-right: 10px;
            width: 100px;
            border-radius: 0px;
            background-color: #f6f6f6;
            color: #ec5546;
            border: none;
            border: 1px solid #ec5546;
        }

        .buy-desc {
            margin-top: 10px;
        }

        .charges-detail {
            text-decoration: none;
        }

        .box-area2 {
            padding-left: 0px;
        }

        .li-commit {
            margin-right: 40px;
        }

            .li-commit a {
                color: #000;
                text-decoration: none;
            }
        /*右边部分*/
        .cont-product-right {
            float: left;
        }

            .cont-product-right .right-cap1 {
                border: 1px solid #ddd;
                width: 290px;
                margin-bottom: 10px;
            }

        .rcap1 {
            border-bottom: 1px solid #ddd;
        }

        .rcap2 {
            padding: 15px 15px 32px 15px;
        }

        .rcap1 {
            padding: 10px 15px;
        }

        .row-cap-center {
            text-align: center;
        }

        .row-cap-left a {
            color: #1367a7;
            text-decoration: underline;
        }

        .rcap2 .col-md-tilte {
            padding: 5px 0px 0px 15px;
            width: 90px;
            float: left;
            font-size: 12px !important;
        }

        .rcap2 .col-md-answer {
            padding: 5px 0px 1px 0px;
            font-size: 12px !important;
            margin-left: -13px;
        }

        .btn-backanswer {
            font-size: 12px !important;
            padding: 2px 5px;
            border-radius: 0px;
            background-color: #fff;
            color: #ec5546;
            border: 1px solid #ec5546;
        }

            .btn-backanswer:hover {
                background-color: #ec5546;
                border: 1px solid #ec5546;
                color: #fff;
            }

        .row-related {
            padding: 5px 15px;
        }

        .btn-relate-search {
            font-size: 12px !important;
            padding: 2px 5px;
            border-radius: 0px;
            color: #938a8a;
            border: 1px solid #938a8a;
            margin-right: 10px;
        }

        .ol-question {
            padding-left: 15px;
        }

            .ol-question li {
                clear: both;
                list-style-type: disc;
                color: #3b3838;
                padding-bottom: 5px;
            }

                .ol-question li a {
                    color: #3b3838;
                    text-decoration: none;
                }

        .question-more {
            text-align: right;
        }

            .question-more a {
                color: #462aba;
                text-decoration: none;
            }

        .box-detail-title li {
            margin-right: 40px;
        }

            .box-detail-title li a {
                color: #6d6a6a;
                text-decoration: none;
            }

        .li-det a {
            color: #f00 !important;
        }

        .product-buy-desc2 {
            border-bottom: 1px solid #ddd;
            padding: 15px 15px 15px 0px;
        }

        .row-detail1, .row-detail2, .row-detail3 {
            padding: 15px 5px 15px 5px;
        }

        .row-ty2 {
            margin-left: -20px;
        }

        .row-detail2 span {
            display: block;
            margin-bottom: 3px;
        }

        .row-detail3 .col-md-12 {
            padding-top: 15px;
        }

        .guide {
            padding-left: 15px;
        }

            .guide li {
                padding-bottom: 5px;
            }
		.param{
			background: url(../../images/param.png) no-repeat;
			height: 200px;
			margin-left: 10px;
		} 
		.result{
			background: url(../../images/result.png) no-repeat;
			height: 200px;
			margin-left: 10px;
		}   
		.errrCode{
			background: url(../../images/erroCode.png) no-repeat;
			height: 200px;
			margin-left: 10px;
		}    
		.simpleCode{
			background: url(../../images/simpleCode.png) no-repeat;
			height: 200px;
			margin-left: 10px;
		}      
       .tab0{
       	
       }
       .tab1{
       		display: none;
       }
       .tab2{
       		display: none;
       }
       .tab3{
       		display: none;
       }
       .tab4{
       		display: none;
       }
    </style>
</head>
<body>
    <iframe src="head.html" width="100%" scrolling="no" name="myiframe" frameborder="0" height="60px"></iframe>

    <div class="contant_text">
        <div class="container contanter_area" style="margin-bottom: 15px;">
            <div class="row" style="padding-top: 0px;">
                <div class="" style="height:85px;width:230px;padding:15px;float:left;">
                    <p class="b1">产品与服务</p>
                    <p class="b2">支撑两化融合，快速上云</p>
                </div>
                <div class="" style="width:440px;float:left;padding-top:20px;padding-bottom:15px;">
                    <div class="seacrh-text">
                        <div class="input-group">
                            <span class="input-group-addon btn-primary list-search">搜索</span><input type="text" class="form-control input-lg lg-input-add" placeholder="请输入搜索关键字">
                        </div>
                        <p class="b3">热门关键词：<span>基础建设</span><span> 报表工具</span><span> 财务管理</span><span>  3D打印</span></p>
                    </div>

                </div>
                <div style="float:left;padding-top:20px;padding-bottom:15px;padding-left:40px;">
                    <div class="search-btn1">
                        <button type="button" class="btn btn-default-add1">买家中心</button>
                    </div>
                    <div class="search-btn2">
                        <button type="button" class="btn btn-default-add2">
                            卖家中心
                            <span>
                                <img src="Content/Image/icon-bottom.jpg" />
                            </span>
                        </button>
                    </div>
                </div>
            </div>

            <div class="row row-add1">
                <div class="" style="float:left;width:230px;">
                    <button type="button" class="btn btn-default-add3">产品与服务类型</button>
                </div>
                <div class="">
                    <ol class="breadcrumb breadcrumb-add">
                        <li><a href="#">设备接入</a></li>
                        <li><a href="#">工业与服务</a></li>
                        <li><a href="#">基础建设</a></li>
                        <li><a href="#">单项应用</a></li>
                        <li><a href="#">综合集成</a></li>
                        <li><a href="#">协同与创新</a></li>
                        <li><a href="#">竞争力</a></li>
                    </ol>
                </div>
            </div>

            <div class="row row-add1" style="height: 38px;">
                <ol class="breadcrumb breadcrumb-add2">
                    <li><a href="#">安全市场</a></li>
                    <li><a href="#">网络市场</a></li>
                    <li><a href="#">山石网科虚拟下一代防火墙 标准版（需购买授权）</a></li>
                </ol>
            </div>

            <!--产品-->
            <div class="container-middle">
                <div class="cont-product">
                    <!--左边产品描述-->
                    <div class="cont-product-left">
                        <div class="product-buy-desc">
                            <div class="media">
                                <div class="media-left media-middle">
                                    <a href="#">
                                        <img class="media-object obj-img" src="Content/Image/yun-list1.jpg">
                                    </a>
                                </div>
                                <div class="media-body" style="width: auto;">
                                    <h4 class="media-heading med-head">山石网科虚拟下一代防火墙 标准版（需购买版权）</h4>
                                    <div class="med-desc">山石云界虚拟防火墙拥有与NGFW相同的操作系统，具有山石云界虚拟防火山石云界虚拟防火山石云界虚拟防火山石云界虚拟防火</div>
                                </div>
                            </div>

                            <div class="row row-price">
                                <div class="col-md-7">
                                    <p>镜像：<span class="sp-coler">￥1.00</span>/ 小时</p>
                                    <p>云服务器：<span class="sp-coler">￥1.00</span>/ 小时</p>
                                </div>
                                <div class="col-md-5 col-evaluation">
                                    <div class="user-evaluation">
                                        <span>用户积累评分：</span>
                                        <div style="display: inline-block;">
                                            <ul class="cleanfloat">
                                                <li class="cs">&#9733;</li>
                                                <li class="cs">&#9733;</li>
                                                <li class="cs">&#9733;</li>
                                                <li>&#9733;</li>
                                                <li>&#9733;</li>
                                            </ul>
                                        </div>
                                    </div>

                                </div>
                            </div>

                            <div class="row" style="height:40px;line-height:40px;">
                                <div class="col-txt">地域：</div>
                                <div class="col-txtbox" style="line-height:40px;float:left;">
                                    <ul class="box-area">
                                        <li class="sel-active"><a href="#">中国东北地区</a></li>
                                        <li class="sel"><a href="#">中国东北地区</a></li>
                                        <li class="sel"><a href="#">中国东北地区</a></li>
                                    </ul>
                                </div>
                            </div>

                            <div class="row" style="height:40px;line-height:40px;clear:both;">
                                <div class="col-txt">规则选择：</div>
                                <div class="col-txtbox" style="">
                                    <ul class="box-area">
                                        <li class="sel-active"><a href="#">官方标配版</a></li>
                                    </ul>
                                </div>
                            </div>

                            <div class="row" style="height:40px;line-height:40px;clear:both;">
                                <div class="col-txt" style="">配置选择：</div>
                                <div class="col-txtbox" style="line-height:40px;float:left;">
                                    <ul class="box-area">
                                        <li class="sel-active"><a href="#">8核8G云主机+1G硬盘</a></li>
                                    </ul>
                                    <span class="self-select"><a href="#">自主选择云主机</a></span>
                                </div>
                            </div>

                            <div class="row" style="height:40px;line-height:40px;clear:both;">
                                <div class="col-txt">购买方式：</div>
                                <div class="col-txtbox">
                                    <ul class="box-area">
                                        <li class="sel-active"><a href="#">按月</a></li>
                                        <li class="sel"><a href="#">按年</a></li>
                                        <li class="sel"><a href="#">按需求</a></li>
                                    </ul>
                                </div>
                            </div>

                            <div class="row" style="height:40px;line-height:40px;clear:both;">
                                <div class="col-txt" style="padding-top: 8px;">单价：</div>
                                <div class="col-txtbox">
                                    <span class="buy-money">￥1.00</span>
                                </div>
                            </div>
                            <div class="row" style="height:40px;line-height:40px;clear:both;">
                                <div class="col-txt"></div>
                                <div class="col-txtbox">
                                    <div class="btn-all">
                                        <button type="button" class="btn btn-primary btn-buy" data-toggle="button">立即购买</button>
                                        <button type="button" class="btn btn-primary btn-save" data-toggle="button">收藏</button>
                                    </div>
                                    <p class="buy-desc">实际扣费以账单为准 <a href="#" class="charges-detail">了解收费详情</a></p>
                                </div>
                            </div>

                        </div>

                        <div class="" style="height:40px;clear:both;line-height:40px;border-top: 1px solid #ddd;">
                            <div class="row">
                                <div class="">
                                    <ul class=""><li class=""><a href="#" style="color:#000;text-decoration:none;">服务承诺：</a></li>
                                        <li class="li-commit"><a href="#">支持全额退款</a></li>
                                        <li class="li-commit"><a href="#">支持全额退款</a></li>
                                        <li class="li-commit"><a href="#">支持全额退款</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="cont-product-right">
                        <div class="right-cap1">
                            <div class="rcap1">
                                <span style="padding-right: 5px;">
                                    <img src="Content/Image/cap1.jpg" />
                                </span><span>服务商信息</span>
                            </div>
                            <div class="rcap2">
                                <div class="row-cap-center">
                                    <img class="obj-img" src="Content/Image/yun-list1.jpg">
                                </div>
                                <div class="row-cap-left"><a href="#">北京山石信息技术有限公司</a></div>
                                <div class="row">
                                    <div class="col-md-5 col-md-tilte">客服电话：</div>
                                    <div class="col-md-7 col-md-answer">400-3431-4287</div>
                                </div>
                                <div class="row">
                                    <div class="col-md-5 col-md-tilte">客服邮箱：</div>
                                    <div class="col-md-7 col-md-answer">MIDHHUE.COM</div>
                                </div>
                                <div class="row">
                                    <div class="col-md-5 col-md-tilte">通讯地址：</div>
                                    <div class="col-md-7 col-md-answer">通讯地址通讯地址通讯地址通讯地址通讯地址</div>
                                </div>
                                <div class="row">
                                    <div class="col-md-5 col-md-tilte">问题处理：</div>
                                    <div class="col-md-7 col-md-answer"></div>
                                </div>
                                <div class="row">
                                    <div class="col-md-9 col-md-tilte">
                                        <button type="button" class="btn btn-primary btn-backanswer" data-toggle="button">提交反馈</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="right-cap1">
                            <div class="rcap1">
                                <span style="padding-right: 5px;">
                                    <img src="Content/Image/cap1.jpg" />
                                </span><span>相关寻找</span>
                            </div>
                            <div class="rcap2">
                                <div class="row row-related">
                                    <span class="btn-relate-search">数据安全</span>
                                    <span class="btn-relate-search">数据安全</span>
                                </div>
                                <div class="row row-related">
                                    <span class="btn-relate-search">数据安全</span>
                                    <span class="btn-relate-search">数据安全</span>
                                </div>
                                <div class="row row-related">
                                    <span class="btn-relate-search">数据安全</span>
                                    <span class="btn-relate-search">数据安全</span>
                                </div>
                                <div class="row row-related">
                                    <span class="btn-relate-search">数据安全</span>
                                    <span class="btn-relate-search">数据安全</span>
                                </div>
                                <div class="row row-related">
                                    <span class="btn-relate-search">数据安全</span>
                                    <span class="btn-relate-search">数据安全</span>
                                </div>
                                <div class="row row-related">
                                    <span class="btn-relate-search">数据安全</span>
                                    <span class="btn-relate-search">数据安全</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="cont-product-detail">
                    <div class="cont-product-left2"  style="margin-top:15px;">
                        <div class="product-buy-desc2">
                            <div class="row row-ty2">
                                <ul class="box-detail-title">
                                    <li class="li-det" id="tab0"><a >产品详情</a></li>
                                    <li class="" id="tab1"><a >产品功能</a></li>
                                    <li class="" id="tab2"><a >API</a></li>
                                    <li class="" id="tab3"><a >错误参照码</a></li>
                                    <li class="" id="tab4"><a >实例代码</a></li>
                                </ul>

                            </div>
                        </div>
                        
                        <!--产品详情-->
						<div class="tab0" >
		                        <div class="row-detail1">
		                            <div class="col-md-12">产品详情</div>
		                        </div>
		                        <div class="row-detail2">
		                            <div class="col-md-6">
		                                <span>版本：v1.0</span>
		                                <span>适用于：v1.0</span>
		                            </div>
		                            <div class="col-md-6">
		                                <span>类型：基于路由器的包过滤防火墙</span>
		                                <span>发布日期：2017-10-1</span>
		                            </div>
		                        </div>
		                        <div class="row-detail3">
		                            <div class="col-md-12">
		                            	包过滤防火墙是用一个软件查看所流经的数据包的包头（header），由此决定整个包的命运。它可能会决定丢弃（DROP）这个包，可能会接受（ACCEPT）这个包（让这个包通过），也可能执行其它更复杂的动作。
		                            </div>
		                        </div>
		
		                        <div class="row-detail3">
		                            <div class="col-md-12">
		                            	
		                            </div>
		                        </div>
		                        <div class="row-detail3">
		                            <div class="col-md-12">
		                            	
		                            </div>
		                        </div>

						</div>

						<!--产品功能-->
						<div class="tab1" >
		                        <div class="row-detail1">
		                            <div class="col-md-12">产品功能</div>
		                        </div>
		                        <div class="row-detail3">
		                            <div class="col-md-12">
		                            	* 允许来自某主机或某网段的所有连接。
		                            </div>
		                        </div>
		                        <div class="row-detail3">
		                            <div class="col-md-12">
		                            		* 拒绝来自某主机或某网段的指定端口的连接。
		                            </div>
		                        </div>
		                        <div class="row-detail3">
		                            <div class="col-md-12">
		                            		* 允许来自某主机或某网段的指定端口的连接。	
		                            </div>
		                        </div>
		                        <div class="row-detail3">
		                            <div class="col-md-12">
		                            	* 拒绝本地主机或本地网络与其它主机或其它网络的所有连接。
		                            </div>
		                        </div>
		                        <div class="row-detail3">
		                            <div class="col-md-12">
		                            	
		                            </div>
		                        </div>
		                        <div class="row-detail3">
		                            <div class="col-md-12">
		                            	
		                            </div>
		                        </div>
		                        <div class="row-detail3">
		                            <div class="col-md-12">
		                            	
		                            </div>
		                        </div>

						</div>
						
						
						<!--API-->
						<div class="tab2" >
		                        <div class="row-detail1">
		                            <div class="col-md-12">API文档</div>
		                        </div>
		                        <div class="row-detail2">
		                            <div class="col-md-6">
		                                <span>接口地址:www.jiekou.com</span>
		                                <span>返回格式:json</span>
		                            </div>
		                            <div class="col-md-6">
		                                <span>请求方式:post</span>
		                                <span>请求示例:www.qingqiu.com</span>
		                                <span>接口备注:接口备注</span>
		                            </div>
		                        </div>
		                        <div class="row-detail3">
		                            <div class="col-md-12 param">
		                            	
		                            </div>
		                            
		                             <div class="col-md-6 result">
		                                
		                            </div>
		                        </div>		                        
						</div>
						
						<!--错误参照码-->
						<div class="tab3" >
		                        <div class="row-detail3">
		                            <div class="col-md-12">
		                            	
		                            </div>
		                        </div>
		                        <div class="row-detail3">
		                            <div class="col-md-12 errrCode">
		                            	
		                            </div>
		                        </div>		                        
		                        <div class="row-detail3">
		                            <div class="col-md-12">
		                            	
		                            </div>
		                        </div>

						</div>	
						
						<!--示例代码-->
						<div class="tab4" >
		                        <div class="row-detail3">
		                            <div class="col-md-12">
		                            	
		                            </div>
		                        </div>
		
		                        <div class="row-detail3">
		                            <div class="col-md-12 simpleCode">
		                            	
		                            </div>
		                        </div>
		                        <div class="row-detail3">
		                            <div class="col-md-12">
		                            	
		                            </div>
		                        </div>

						</div>						
						
						



						<!--表格-->
                        <div class="row-detail3">
                            <div class="col-md-12">

                            </div>

                        </div>
                        <div class="row-detail3">
                            <div class="col-md-12">
                                <img src="Content/Image/content1.jpg" style="width:550px;" />
                            </div>

                        </div>
                    </div>
                    
                    
                    
                    
                    

                    <div class="cont-product-right" style="margin-top:15px;">
                        <div class="right-cap1">
                            <div class="rcap1">
                                <span style="padding-right: 5px;">
                                    <img src="Content/Image/cap1.jpg" />
                                </span><span>常见问题</span>
                            </div>
                            <div class="rcap2">
                                <ol class="ol-question">
                                    <li><a href="#">什么是云市场</a></li>
                                    <li><a href="#">什么是云市场</a></li>
                                    <li><a href="#">什么是云市场</a></li>
                                    <li><a href="#">什么是云市场</a></li>
                                    <li><a href="#">什么是云市场</a></li>
                                    <li><a href="#">什么是云市场</a></li>
                                </ol>
                                <div class="question-more"><a>更多问题>></a></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>


        </div>

    </div>
        <iframe src="bottom1.html" width="100%" scrolling="no" name="myiframe" frameborder="0" height="300px"></iframe>

</body>
<script type="application/javascript">
	(function(){
		var aItem=$(".box-detail-title").find("li");
		aItem.click(function(){
			var id=$(this)
			currentid=id[0].id
			if(currentid=="tab0"){
				$(".tab0").show()
				$(".tab1").hide()
				$(".tab2").hide()
				$(".tab3").hide()
				$(".tab4").hide()
				
				id.addClass("li-det")
				$("#tab3").removeClass("li-det")
				$("#tab1").removeClass("li-det")
				$("#tab2").removeClass("li-det")
				$("#tab4").removeClass("li-det")	
			}
			if(currentid=="tab1"){
				$(".tab0").hide()
				$(".tab1").show()
				$(".tab2").hide()
				$(".tab3").hide()
				$(".tab4").hide()
				
				id.addClass("li-det")
				$("#tab0").removeClass("li-det")
				$("#tab3").removeClass("li-det")
				$("#tab2").removeClass("li-det")
				$("#tab4").removeClass("li-det")	
			}
			if(currentid=="tab2"){
				$(".tab0").hide()
				$(".tab1").hide()
				$(".tab2").show()
				$(".tab3").hide()
				$(".tab4").hide()
				
				id.addClass("li-det")
				$("#tab0").removeClass("li-det")
				$("#tab1").removeClass("li-det")
				$("#tab3").removeClass("li-det")
				$("#tab4").removeClass("li-det")	
			}
			if(currentid=="tab3"){
				$(".tab0").hide()
				$(".tab1").hide()
				$(".tab2").hide()
				$(".tab3").show()
				$(".tab4").hide()
				
				id.addClass("li-det")
				$("#tab0").removeClass("li-det")
				$("#tab1").removeClass("li-det")
				$("#tab2").removeClass("li-det")
				$("#tab4").removeClass("li-det")				
			}
			if(currentid=="tab4"){
				$(".tab0").hide()
				$(".tab1").hide()
				$(".tab2").hide()
				$(".tab3").hide()
				$(".tab4").show()
				
				id.addClass("li-det")
				$("#tab0").removeClass("li-det")
				$("#tab1").removeClass("li-det")
				$("#tab2").removeClass("li-det")
				$("#tab3").removeClass("li-det")				
			}
		})
	})()
	
</script>
</html>
